在使用 vue.js 开发大型应用时，需要考虑以下功能：

统一的目录结构
项目部署
热加载
单元测试

若每个项目都手动去完成这些工作，效率会非常低，所以我们通常会使用集成了以上功能的工具。

这个工具就是 CLI 了，其具体定义如下：

CLI（Command Line Interface），即命令行界面，俗称脚手架

而 Vue CLI 是官方发布 vue.js 项目的脚手架，使用它可以快速搭建 Vue 开发环境及对应的 Webpack 配置。（类似于 Maven！）

Vue CLI 的安装

Vue CLI 3 的安装命令如下：

1	npm install @vue/cli -g

Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2（ vue-cli ）被覆盖了，若需要使用旧版本的vue init功能，可以安装一个桥接工具：

1	npm install @vue/cli-init -g

注意哦：使用 Vue CLI 的前提是你安装了 Node JS 及 NPM

项目搭建

Vue CLI 2 项目搭建

项目初始化

Vue CLI 2 初始化项目的命令：

1	vue init webpack project-name

注：Webpack 是一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

下面为安装步骤及说明：

? Project name vue-cli-demo  // 项目名
? Project description A Vue.js project  // 项目描述
? Author wksky <940124743@qq.com>  // 项目作者，和 git 相关
? Vue build standalone  // 如何构建
❯ Runtime + Compiler: recommended for most users 
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 
? Install vue-router? No  // 是否使用 vue-router
? Use ESLint to lint your code? No  // 是否使用严格语法的代码，推荐不要使用
? Set up unit tests No  // 是否建立单元测试
? Setup e2e tests with Nightwatch? (Y/n) n  // 同上
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  // 按照方式
❯ Yes, use NPM 
  Yes, use Yarn 
  No, I will handle that myself

目录结构

通过tree vue-cli-demo --dirsfirst -avL 1命令查看初始化后的目录结构：

├── build
├── config
├── node_modules
├── src
├── static
├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── index.html
├── package.json
├── package-lock.json
└── README.md

说明如下：

build：构建客户端和服务端的配置
config：相关配置
node_modules：依赖包
src：重要组件及入口页引用的js文件
static：静态文件
index：入口页
package.json：粗略依赖信息
package-lock.json：详细依赖信息
README.md：说明文档

Vue CLI 3 项目搭建（推荐）

项目初始化

Vue CLI 3 初始化项目的命令：

1	vue create project-name

下面为安装步骤及说明：

? Please pick a preset:   // 选择安装方式
  default (babel, eslint) 
❯ Manually select features 
? Check the features needed for your project:   // 空格选择需要的功能，回车确认
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)  // 单独分离此配置还是直接放入 package.json 中
❯ In dedicated config files 
  In package.json 
? Save this as a preset for future projects? (y/N) y  // 是否创建该配置方式到开始选项中，下面为期起个名字吧：
? Save preset as: my vue3 config

目录结构

├── node_modules
├── public
├── src
├── .browserslistrc
├── .gitignore
├── babel.config.js
├── package.json
├── package-lock.json
├── postcss.config.js
└── README.md

基本和 2 的差不多

1 2	npm i element-ui -S npm install sass-loader node-sass --save-dev

Vue CLI UI

Vue CLI 3 提供了非常友好的 UI 界面，通过下面的命令即可启动：

vue ui

启动后的界面如下（ vue-cli是我导入过的项目）：

在其中可以创建项目，导入项目，导入项目后在可以其中：

查看项目仪表盘
查看项目的具体信息（如插件、依赖、配置）
在任务中可以启动项目

Vue CLI 2 VS 3

Vue CLI 3 与 2 有很大区别：

Vue CLI 3 基于 Webpack 4 打造，而 Vue CLI 2 还是 Webpack 3
Vue CLI 3 的设计原则是 0 配置 ，移除配置文件根目录下的 build 和 config 等目录（这些配置可以在 Vue UI 中设置）
Vue CLI 3 提供了 Vue UI 命令，提供了可视化配置，更加人性化
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中

启动项目

Vue CLI 2 的启动命令为：

1
2
3

npm run dev
// 或者（可自定义）
npm start

Vue CLI 3 的启动命令为：

1	npm run serve

webpack 工具

在搭建和运行 Vue 项目时，都会用到 webpack 工具，那么它是什么呢？

什么是 webpack?

从本质上来将，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

简单来讲，webpack 的作用就是以下 2 点：

模块化：webpack 使得我们可以进行模块化开发，其会帮助我们处理模块间的依赖关系。模块不仅仅是 JS 文件，CSS、图片、Json 等文件都可以被当作模块。
打包：webpack 可以将各种资源模块打包合并为一个或多个包（bundle），打包过程中还可以进行资源处理（如压缩图片、语法转换）。

安装 webpack

webpack 安装前需要安装 Node.js，其自带了 npm 包管理工具。
npm 安装完成以后，可以选择全局或局部安装 webpack：

1
2
3

npm install webpack -g
// 下面为开发时依赖，项目打包后不需要继续使用
npm install webpack --save-dev

Vue 项目中的 webpack

当我们执行以下命令启动项目时：

1	npm run serve

该命令其实会根据 webpack 的配置文件（如 Vue CLI 2 搭建项目的config文件夹下的webpack.conf.js文件）将 src文件夹下的 main.js文件（及其导入的模块文件）打包到 dist文件夹的js目录下。
其实呀，main.js又会用到 ES 6 模块导入其他文件（如 JS 文件，Vue相关的文件等等），而 webpack 会自动处理这些模块间的依赖关系。